<template>
	<div class="alerts-page" style="padding: 20px;">
		<el-row justify="space-between" align="middle" style="margin-bottom: 16px;">
			<el-col>
				<el-select v-model="filterLevel" placeholder="告警等级" clearable size="small">
					<el-option label="全部" value="" />
					<el-option label="高" value="高" />
					<el-option label="中" value="中" />
					<el-option label="低" value="低" />
				</el-select>
			</el-col>
			<el-col>
				<el-input v-model="searchKeyword" size="small" placeholder="搜索设备/内容..." clearable />
			</el-col>
		</el-row>

		<el-table :data="filteredAlerts" border stripe>
			<el-table-column prop="device" label="设备名称" />
			<el-table-column prop="level" label="告警等级" width="100">
				<template #default="{ row }">
					<el-tag :type="levelTag(row.level)">{{ row.level }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="content" label="告警内容" />
			<el-table-column prop="time" label="发生时间" width="180" />
			<el-table-column prop="status" label="处理状态" width="120">
				<template #default="{ row }">
					<el-tag :type="row.status === '已处理' ? 'success' : 'danger'">{{ row.status }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="140">
				<template #default="{ row }">
					<el-button v-if="row.status !== '已处理'" type="text" @click="markResolved(row)">标记已处理</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const searchKeyword = ref('')
const filterLevel = ref('')

const alerts = ref([
	{ device: '电梯-A', level: '高', content: '故障代码 E27 - 门控异常', time: '2024-05-01 08:33', status: '未处理' },
	{ device: '空调主机', level: '中', content: '温度传感器断开', time: '2024-04-30 21:10', status: '已处理' },
	{ device: '锅炉-1', level: '低', content: '运行间隔超时', time: '2024-04-30 18:44', status: '未处理' }
])

const filteredAlerts = computed(() =>
	alerts.value.filter(a =>
		(!searchKeyword.value || a.device.includes(searchKeyword.value) || a.content.includes(searchKeyword.value)) &&
		(!filterLevel.value || a.level === filterLevel.value)
	)
)

function levelTag(level) {
	return level === '高' ? 'danger' : level === '中' ? 'warning' : 'info'
}

function markResolved(row) {
	row.status = '已处理'
	ElMessage.success(`已标记为处理：${row.device}`)
}
</script>

<style scoped>
.alerts-page {
	max-width: 1200px;
	margin: auto;
}
</style>
